 <section class="product">
      <div class="product-header">
        <div class="left">
          <span class="shop-name">{{product.storeName}}</span>
        </div>
        <div class="right">
          <span>评价{{product.areaAgentFee}}分</span>
          <span>配送费&yen;{{product.deliveryPrice}}</span>
        </div>
      </div>
      <div class="product-content">
        <div class="img-wrapper">
          <img [attr.src]="product.foodImageURL" [attr.alt]="product.foodName">
        </div>
        <div class="product-info">
          <div class="title" [ngClass]="{'in-active': !hasProduct}">{{product.foodName}}</div>
          <div class="info-body">
            <div class="body-left">
              <div class="remain">
                <div class="remain-num"
                  [ngClass]="{'active': hasProduct}"
                >
                  <span *ngIf="hasProduct">仅剩{{product.promotionStock}}份</span>
                  <span *ngIf="!hasProduct">今日已抢完</span>
                </div>
                <div class="remain-bar">
                  <div [ngStyle]="{'width': width}" class="bar-inner"></div>
                </div>
              </div>
              <div class="price-wrapper">
                <div class="cur-price" [ngClass]="{'in-active': !hasProduct}">&yen;<span>{{product.activityPrice}}</span></div>
                <div class="pre-price"><span>&yen;{{product.originalPrice}}</span></div>
              </div>
            </div>
            <div class="right-button">
              <button [ngClass]="{'none': !hasProduct}" *ngIf="hasProduct">马上抢</button>
              <button [ngClass]="{'none': !hasProduct}" *ngIf="!hasProduct">进店逛逛</button>
            </div>
          </div>
        </div>
      </div>
    </section>